<template>
    <div class="main">
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      :highlight-current-row = "true"
    >
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column prop="user.name" label="执行人" sortable>
      </el-table-column>
      <el-table-column prop="user.role.role" label="身份">
      </el-table-column>
      <el-table-column prop="user.section.name" label="所属部门">
      </el-table-column>
      <el-table-column prop="date" label="时间段">
      </el-table-column>
      <el-table-column prop="performance" label="效绩" sortable>
      </el-table-column>
    </el-table>
    <el-pagination background layout="sizes, prev, pager, next" :page-size="pageSize" :page-sizes="[5,10, 20, 50]" :current-page="pageNum" :total="total3" class="pagination" 
    @size-change="sizeChange" @current-change="currentChange"
    ></el-pagination>
    <!-- <el-dialog
      title="确认删除"
      :visible.sync="dialogVisible"
      width="30%">
      <span>确认删除该记录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="remove()">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            pageNum: 1,
            total3: 100,
            pageSize: 5,
            dialogVisible: false,
        }
    },
    methods: {
        async remove() {
            const res = await this.$http.post("data/delete",{
                _id: this.removeId
            })
            console.log(res.data);
            this.fetchData();
            this.dialogVisible = false;
            this.$message({
                type: "success",
                message: "删除成功!"
            })
        },
        currentChange(page) {
            this.pageNum = page;
            this.fetchData();
        },
        sizeChange(size) {
            this.pageSize = size;
            this.fetchData();
        },
        async fetchData() {
            const res = await this.$http.post("/api/performance/findPageByUserId", {
                id: localStorage.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            });
            this.tableData = res.data.data.content;
            this.total3 = res.data.data.totalSize;
        },
    },
    created() {
        this.fetchData();
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 90%;
    position: relative;
    top: 25px;
    .pagination {
        position: relative;
        top: 50px;
        left: 400px;
    }
}
</style>